<template>
  <div>
    <div id="app">
      <div class="content">
        <div class="content_input">
          <div class="title">
            <p>用户注册</p>
          </div>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
            <el-form-item prop="phone">
              <el-input
                v-model="ruleForm.phone"
                clearable
                placeholder="手机号"
                @keydown.enter.native="nextFocus(0)"
              ></el-input>
            </el-form-item>
            <el-form-item prop="mail">
              <el-input
                v-model="ruleForm.mail"
                placeholder="邮箱"
                clearable
                @keydown.enter.native="nextFocus(1)"
              ></el-input>
            </el-form-item>
            <el-form-item style="display: flex" prop="verification">
              <el-input
                class="input"
                style="width: 216px"
                v-model="ruleForm.verification"
                placeholder="请输入验证码"
                @keydown.enter.native="nextFocus(2)"
              ></el-input>
              <el-button
                class="button"
                @click="yanzheng()"
                :disabled="dianji"
                >{{ yan }}</el-button
              >
            </el-form-item>
            <el-form-item prop="poss">
              <el-input
                placeholder="密码"
                clearable
                show-password
                v-model="ruleForm.poss"
                @keydown.enter.native="nextFocus(4)"
              ></el-input>
            </el-form-item>
            <el-form-item prop="checkPass">
              <el-input
                placeholder="确认密码"
                clearable
                show-password
                v-model="ruleForm.checkPass"
                autocomplete="off"
                @keydown.enter.native="nextFocus(5)"
              ></el-input>
            </el-form-item>

            <el-form-item prop="company">
              <el-input
                v-model="ruleForm.company"
                placeholder="单位名称"
                clearable
                @keydown.enter.native="nextFocus(6)"
              ></el-input>
            </el-form-item>
            <el-form-item prop="credit">
              <el-input
                v-model="ruleForm.credit"
                placeholder="信用代码"
                clearable
                @keydown.enter.native="nextFocus(7)"
              ></el-input>
            </el-form-item>
            <el-form-item prop="name">
              <el-input
                v-model="ruleForm.name"
                placeholder="联系人姓名"
                clearable
                @keydown.enter.native="nextFocus(8)"
              ></el-input>
            </el-form-item>
            <div class="content_button">
              <el-button type="primary" @click="submitForm('ruleForm')"
                >立即注册</el-button
              >
            </div>
            <div class="zhanghao" @click="deng()">
              <a
                href="javascript:void(0)"
                style="color: red; text-decoration: none"
                >已有账号？立即登录！</a
              >
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript" src="../js/ribbon.js"></script>
<script type="text/javascript" src="../js/index_copys.js"></script>
<script>
import ribbon from "../js/ribbon";
import index_copys from "../js/index_copys";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.poss) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    var validateVerification = (rule, value, callback) => {
      //验证码
      if (value === "") {
        callback(new Error("请输入验证码"));
      } else {
        if (
          this.ruleForm.phone == this.shuju.phone &&
          this.ruleForm.verification == this.shuju.verification
        ) {
          let dat = this.shuju.times; //截止时间
          let getYeardata = dat.split(" ")[0];
          let getTimedata = dat.split(" ")[1];
          //  年月日  时分秒
          const beforeYear = getYeardata.split("-")[0];
          const beforeMonth = getYeardata.split("-")[1];
          const beforeDate = getYeardata.split("-")[2];
          const beforeHours = getTimedata.split(":")[0];
          const beforeMinutes = getTimedata.split(":")[1];
          const beforeSeconds = getTimedata.split(":")[2];
          const myDate = new Date();
          myDate.getFullYear(); //获取完整的年份(4位,1970-????)
          myDate.getMonth(); //获取当前月份(0-11,0代表1月)
          myDate.getDate(); //获取当前日(1-31)
          myDate.getHours(); //获取当前小时数(0-23)
          myDate.getMinutes(); //获取当前分钟数(0-59)
          myDate.getSeconds(); //获取当前秒数(0-59)
          // 计算差值
          const getDifference =
            (myDate.getFullYear() - beforeYear) * 365 * 24 * 60 * 60 +
            (myDate.getMonth() - beforeMonth + 1) * 30 * 24 * 60 * 60 +
            (myDate.getDate() - beforeDate) * 24 * 60 * 60 +
            (myDate.getHours() - beforeHours) * 60 * 60 +
            (myDate.getMinutes() - beforeMinutes) * 60 +
            (myDate.getSeconds() - beforeSeconds);
          if (getDifference <= 600) {
            callback();
          } else {
            callback(new Error("您输入的验证码已失效！"));
          }
        } else {
          callback(new Error("请输入正确的验证码"));
        }
      }
    };
    var validatePass3 = (rule, value, callback) => {
      //邮箱
      if (value === "") {
        callback(new Error("请输入邮箱"));
      } else {
        if (
          /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(
            this.ruleForm.mail
          )
        ) {
          callback();
        } else {
          callback(new Error("请输入合法的邮箱"));
        }
      }
    };
    var validatephone = (rule, value, callback) => {
      //手机号
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else {
        if (/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.ruleForm.phone)) {
          callback();
        } else {
          callback(new Error("请输入合法的手机号"));
        }
      }
    };
    return {
      shuju: [], //暂存验证码
      userInfo: "", //数据
      yan: "验证码",
      a: "",
      dianji: false, //点击验证码
      ruleForm: {
        //表单值
        phone: "",
        mail: "", //邮箱
        verification: "", //验证码
        poss: "",
        checkPass: "",
        company: "",
        credit: "",
        name: "",
      },
      rules: {
        phone: [
          //手机号
          { pattern: /^1(3|4|5|6|7|8|9)\d{9}$/, message: "请输入合法的手机号" },
          { validator: validatephone, trigger: "blur" },
        ],
        company: [
          { required: true, message: "请输人单位名称", trigger: "blur" },
          {
            pattern: /^[\u4E00-\u9FA5\uf900-\ufa2d]{2,5}$/,
            message: "请输入最少2位数的单位名称",
          },
        ],
        credit: [
          { required: true, message: "请输人信用代码", trigger: "blur" },
          {
            pattern: /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/,
            message: "请输入合法的18位信用代码",
          },
        ],
        name: [
          { required: true, message: "请输人联系人姓名", trigger: "blur" },
          {
            pattern: /^[\u4E00-\u9FA5\uf900-\ufa2d]{2,5}$/,
            message: "请输入中国大陆合法的姓名",
          },
        ],
        verification: [
          { validator: validateVerification, trigger: "blur" },
          { pattern: /^[a-zA-Z0-9]{6}$/, message: "请输入六位数的验证码" },
        ],
        poss: [
          { validator: validatePass, trigger: "blur" },
          {
            pattern: /^[A-Z-a-z0-9_-]{6,18}$/,
            message: "请输入最少6位数的密码",
          },
        ],
        checkPass: [
          { validator: validatePass2, trigger: "blur" },
          {
            pattern: /^[A-Z-a-z0-9_-]{6,18}$/,
            message: "请输入最少6位数的确认密码",
          },
        ],
        mail: [
          {
            pattern:
              /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            message: "请输入合法的邮箱",
          },
          { validator: validatePass3, trigger: "blur" },
        ],
      },
    };
  },
  created() {
    var a = document.getElementById("bgCanvas");
    a.style.display = "block";
  },
  beforeCreate() {},
  methods: {
    nextFocus(index) {
      //按回车键，聚焦下一个input。
      if (index == 2) {
        this.$refs["ruleForm"].$el[index + 2].focus();
        return;
      }
      if (index < 8 || index != 2) {
        this.$refs["ruleForm"].$el[index + 1].focus();
        if (index == 1) {
          this.yanzheng();
        }
      } else {
        this.submitForm("ruleForm");
      }
    },
    deng: function () {
      var a = document.getElementById("bgCanvas");
      a.style.display = "none";
      this.$router.push("/logo/sign");
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.http
            .type("/logins", {
              sub: "regist",
              phone: this.ruleForm.phone,
              poss: this.ruleForm.poss,
              company: this.ruleForm.company,
              credit: this.ruleForm.credit,
              name: this.ruleForm.name,
              email: this.ruleForm.mail,
            })
            .then((response) => {
              this.ruleForm.phone = "";
              this.ruleForm.pass = "";
              this.ruleForm.checkPass = "";
              this.ruleForm.company = "";
              this.ruleForm.credit = "";
              this.ruleForm.name = "";
              this.ruleForm.verification = "";
              this.shuju = ""; //验证码清除
              this.ruleForm.mail = "";
              if (response.data.code == 1) {
                this.$message({
                  message: response.data.msg,
                  type: "success",
                });
                this.$router.push({ path: "../logo/sign" });
              } else {
                this.$message({
                  message: response.data.msg,
                  type: "warning",
                });
              }
            });
        } else {
          this.$message({
            showClose: true,
            message: "请填写完整哦！",
            type: "warning",
          });
          return false;
        }
      });
    },
    yanzheng: function () {
      //发送验证码
      if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.ruleForm.phone)) {
        this.$message({ showClose: true, message: "请输入合法的手机号" });
        return;
      }
      if (
        !/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(
          this.ruleForm.mail
        )
      ) {
        this.$message({ showClose: true, message: "请输入合法的邮箱" });
        return;
      }
      this.dianji = true;
      var a = setInterval(() => {
        if (this.yan == "验证码") {
          this.yan = 29; //把按钮验证码变为数字
          this.http
            .type("/email", {
              phone: this.ruleForm.phone,
              mail: this.ruleForm.mail,
            })
            .then((response) => {
              this.shuju = response.data;
            });
        } else {
          if (this.yan == "0") {
            this.yan = "验证码";
            this.dianji = false;
            clearInterval(a);
          } else {
            this.yan--;
          }
        }
      }, 1000);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
<style lang="less" scoped>
.zhanghao {
  text-align: center;
  color: red;
  margin-top: 15px;
  font-size: 14px;
}
.content {
  width: 500px;
  height: 680px;
  box-sizing: border-box;
  padding: 0 50px;
  border-radius: 5px;
  box-shadow: 0px 2px 12px 0px rgba(105, 105, 105, 0.07);
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: mymove 2s ease-in-out alternate;
  overflow: hidden;
  transition: 3.5s;
}
.content_input {
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.content_button {
  margin-top: 10px;
}

.title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 30px;
  font-weight: bold;
  color: #606266;
}

.el-button--primary {
  width: 100%;
}
@keyframes mymove {
  0% {
    width: 0px;
    height: 5px;
  }

  10% {
    width: 50px;
    height: 5px;
  }

  15% {
    width: 100px;
    height: 5px;
  }

  20% {
    width: 150px;
    height: 5px;
  }

  25% {
    width: 200px;
    height: 5px;
  }

  30% {
    width: 250px;
    height: 5px;
  }

  35% {
    width: 300px;
    height: 5px;
  }

  40% {
    width: 350px;
    height: 5px;
  }

  45% {
    width: 450px;
    height: 5px;
  }

  50% {
    width: 500px;
    height: 5px;
  }

  55% {
    height: 50px;
  }

  60% {
    height: 150px;
  }

  65% {
    height: 250px;
  }

  70% {
    height: 300px;
  }

  75% {
    height: 350px;
  }

  80% {
    height: 400px;
  }

  85% {
    height: 450px;
  }

  90% {
    height: 550px;
  }

  95% {
    height: 580px;
  }

  100% {
    height: 680px;
  }
}
</style>
<style>
/* @charset "utf-8"; */
/* * {
  padding: 0;
  margin: 0;
} */

</style>